<template>
	<div class="content">
		<div class="info">
			<van-cell-group :border='false'>
			  <van-cell title="真实姓名" :value="form.pat_name" />
			  <van-cell title="证件号码" :value="desenText(form.idno)" />
			  <van-cell title="手机号" :value="form.phno"/>
			  <van-cell title="民族" :value="form.nation_name"/>
			  <van-cell title="详细地址" :value="form.pat_hous_addr"/>
			  <van-cell title="性别" :value="form.pat_sex_name"/>
			  <van-cell title="生日" :value="form.pat_brsdate" />
			  <van-cell title="是否本人">
			      <van-switch @change='change' active-color="#26D54B" slot="right-icon" size="20px" v-model="is_self" />
			  </van-cell>
			</van-cell-group>
		</div>
		<div class='carInfo'>
			<img class="carInfo-img"  :src="'https://guahao.tcyy.org.cn/api/image?barcode='+form.pid" alt="">
			<div>{{form.pid}}</div>
		</div>
		<div class="addBtn flex3" @click="delEvent()">
			删除该家庭成员
		</div>
		<back-img></back-img>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form:{},
				vistorId:'',
				is_self:false
				
			};
		},
		created() {
			if(this.$route.query.id) {
			    this.vistorId = this.$route.query.id
				this.vistorShow()
			}
		},
		components: {

		},
		methods: {
			desenText(str){
				let res = str
				const len = str.length
				let pre4 = ''
				let last6 = ''
				pre4 = str.slice(0,4)
				last6 = str.slice(Math.max(len - 6,4))
				const star = Math.max(0,len-10)
				res = pre4 + '*'.repeat(star) + last6
				return res
			},
			vistorShow(){
				let url = "/api/pat/info";
				this.$axios.get(url,{params:{id:this.vistorId}}).then(res => {
					console.log("res", res);
					this.form=res.pat_info
					this.is_self=res.pat_info.is_self
					
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			//删除
			delEvent(){
				let that=this
				let url = "/api/pat/delete";
				this.$axios.get(url,{params:{id:this.vistorId}}).then(res => {
					that.$toast('删除成功！');
					setTimeout(()=>{
						that.$router.replace("/visitorCard")
					},1000)
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			change(e){
				console.log(e)
				this.is_self=e
				this.editUser()
			},
			editUser(){
				let url = "/api/pat/update";
				this.form.is_self=this.is_self==true?1:0
				this.$axios.post(url,this.form).then(res => {
					this.$toast('修改成功！');
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		/deep/.van-cell__value{
			color: #505050;
		}
		/deep/.van-cell__title{
			color: #505050;
		}
		padding-top: 10px;
		min-height: 100vh;
		background-color:#f0f8f8;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		.carInfo{
			width: 346px;
			padding: 10px 0;
			background: #FFFFFF;
			border-radius: 5px;
			margin: auto;
			font-size: 18px;
			font-family: PingFang;
			font-weight: 500;
			color: #666666;
			text-align: center;
			&-img{
				height: 72px;
				margin:0 auto 9px;
				display: block;
			}
		}
		.info{
			width: 346px;
			background: #FFFFFF;
			border-radius: 5px;
			margin: 0 14px 10px 15px;
		}
		.addBtn{
			width: 340px;
			height: 44px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 22px;
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			margin: 15px auto;
		}
	}
</style>